<template>
    <view class="modal-box" v-if="modelValue">
        <view class="header-box" >
            <view class="btn-back">
                <up-button size="mini" @click.stop="handlerClose">关闭</up-button>
            </view>
            <view class="title">{{title}}</view>
            <view class="btn-confirm">
                <up-button color="#f8744d" size="mini" @click.stop="handlerConfirm">确定</up-button>
            </view>
        </view>
        <view class="content">
            <slot></slot>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onBackPress } from '@dcloudio/uni-app'
	
    const props=defineProps({
        title:String,
        show:Boolean,
        modelValue:Boolean
    })

    const emit=defineEmits(['update:modelValue','confirm'])

    onBackPress((options)=>{
		console.log(options)
	})

    const handlerConfirm=()=>{
        emit("confirm")
        emit("update:modelValue",false)
    }

    const handlerClose=()=>{
        emit("update:modelValue",false)
    }
	
</script>

<style lang="scss">
    .modal-box{
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: $uni-bg-color-grey;
        z-index: 100;
        display: flex;
        flex-direction: column;
    }
    .header-box{
        width: 100%;
        position: relative;
        display: flex;
        text-align: center;
        background-color: #fff;
        padding: 20upx 0;
        .title{
            display: inline-block;
            width: 100%;
        }
        .btn-confirm{
            position: absolute;
            right: 0;
            padding-right: 20upx;
        }
        .btn-back{
            position: absolute;
            left: 0;
            padding-left: 20upx;
        }
    }
    .content{
        height: 100%;
    }

</style>